require(['./config'], () => {
    require(['template','floatbar','header','footer','fly' , 'zoom'], (template , floatbar) => {
        class Details {
            constructor(){
                this.guessTheHobby()
                this.getData().then(() =>{
                    this.renderDetail()
                    this.addTocart()
                    this.zoom()
                    this.calcCountNumadd1()
                    this.calcCountNumreduce1()
                    this.tasteType()
                    this.Types()
                })

            }
            guessTheHobby(){
                $.get('http://rap2api.taobao.org/app/mock/236205/list/likes', resp => {
                    if(resp.code === 200){
                        const{likes} = resp.body
                        
                        // { guessLove: likes} 前面是模板引擎的字段名，后面的是数据的变量名
                        $('#sidebar-bottom').html(template('guessYourLove',{ guessLove: likes}))
                    }
                })
            }
            
            getData(){
                // 获取列表页传过来的id，根据id请求数据
                const id = Number(window.location.search.slice(4)) 
                return new Promise(resolve => {
                    $.get('http://rap2api.taobao.org/app/mock/236205/detail', { id } , resp => {
                        if(resp.code === 200){
                            
                            const{detail} = resp.body
                            
                            // 由于使用的是rap2假接口，所以detail里没有正确的id值，所以我们要手动加上去
                            // 运用扩展运算符把返回的detail展开，加上id字段，写给this对象，这样别的方法也能访问detail了
                            this.detail = {...detail , id }
                            resolve()
                        }
                    })
                })
                
            }
            renderDetail(){
                // 由于模板引擎里每个字段都是分开写的，所以我们需要展开传
                // console.log(this.detail)
                var res2 = template('detailTemplate', {  ... this.detail })
                
                $('#neirong2').html(res2)
            }
            //添加商品到购物车效果
            addTocart(){
                $('#add-to-cart-btn').on('click' , e => {
                    this.fly(e)
                    // 把当前商品数据存入localStorage,但是将来真实项目还要交互后端
                    // 先去出来判断是否为空
                    let cart = localStorage.getItem('cart')
                    if(cart){
                        // 先去，再push ， 再存
                        // 先把取出来的数据转成json
                        // 判断当前商品在购物车里是否存在
                        //  存在，加count的数量值
                        //  不存在，push
                        // 最后再存
                        cart = JSON.parse(cart)
                        const isExsit = cart.some((shop,index ) => {
                            return shop.id === this.detail.id
                        })
                        if(isExsit){
                            // 已存在
                            cart = cart.map(shop => {
                                if(shop.id === this.detail.id)
                                    shop.count = shop.count + Number($('#countNum').html())
                                    return shop  
                            })
                        }else{
                            // 当前商品第一次加购物车
                            cart.push({
                                ...this.detail,
                                count: Number($('#countNum').html()),
                                check:true
                            })
                        }
                        localStorage.setItem('cart',JSON.stringify(cart))
                    } else {
                        // 购物车为空
                        // 创建一个只有当前商品这一条数据的数组，存进去
                        // 除了存detail自身的属性外，还要存数量count,实际上可以写成input的value
                        localStorage.setItem('cart' , JSON.stringify([ {
                            ...this.detail,
                            count : Number($('#countNum').html()),
                            check:true
                        } ]))
                    }
                    
                })
            }
            fly(e){
                // 抛物线效果
                // console.dir($)查看原型
                $(`<img src="${this.detail.img[0]}" style="width: 30px;height:30px;border-radius:50%">`).fly({
                    start:{
                        left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.clientY,  //开始位置（必填）
                    },

                    end:{
                        left: $('.btn-cart').offset().left, //结束位置（必填）
                        top: $('.btn-cart').position().top  //结束位置（必填）
                        
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 30, //运动轨迹最高点top值，默认20
                    onEnd: function(){
                        this.destroy()
                        // 调用计算count总和的方法
                        floatbar.calcCartCounts()
                    } //结束回调
                })
            }
            // 放大镜方法
            zoom(){

                $('.zoom-image').elevateZoom({
                    // 传递所有小图的父级容器的id
                    gallery: 'spec-list'
                })
            }

            // 减
            calcCountNumreduce1(){
                $('.numreduce').on('click',function(){
                    // 把当前商品数据存入localStorage,但是将来真实项目还要交互后端
                    // 先去出来判断是否为空
                    let cart = localStorage.getItem('cart')
                    var numcounts = Number($('#countNum').html())
                    if(numcounts <=1 ){
                        numcounts = 1
                    }else{
                        numcounts = numcounts-1
                    }
                    $('#countNum').html( numcounts)
                })
                
            }
            // 加
            calcCountNumadd1(){
                $('.numadd').on('click',function(){
                    // 把当前商品数据存入localStorage,但是将来真实项目还要交互后端
                    // 先去出来判断是否为空
                    let cart = localStorage.getItem('cart')
                    var numcounts = Number($('#countNum').html())
                    numcounts = numcounts+1 
                    $('#countNum').html( numcounts)
                })
            }

            // taste样式
            tasteType(){
                $('#tastes-id>#tastes-li').on('click',function(){
                    $(this).addClass('change').siblings().removeClass('change')
                })
            }
            // 规格
            Types(){
                $('#choose-models>#models').on('click',function(){
                    $(this).addClass('change').siblings().removeClass('change')
                })
            }
        }
        new Details()
    })
})